<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stone UI 组件演示</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
    }
    .demo-section {
      margin-bottom: 40px;
      padding: 20px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .demo-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 16px;
      color: #333;
      border-bottom: 2px solid #4285f4;
      padding-bottom: 8px;
    }
    .demo-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      margin-top: 20px;
    }
    .status-panel {
      position: fixed;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.8);
      color: white;
      padding: 10px;
      border-radius: 5px;
      font-size: 12px;
      z-index: 1000;
    }
  </style>
</head>
<body>
  <h1>Stone UI 框架 - 组件演示</h1>
  
  <div id="status" class="status-panel">
    <div>当前主题: <span id="theme-status">亮色模式</span></div>
    <div>演示状态: <span id="demo-status">就绪</span></div>
  </div>

  <!-- 主题控制 -->
  <div class="demo-section">
    <div class="demo-title">主题控制</div>
    <div id="theme-controls"></div>
  </div>

  <!-- Text 组件演示 -->
  <div class="demo-section">
    <div class="demo-title">Text 组件</div>
    <div id="text-demo"></div>
  </div>

  <!-- EditText 组件演示 -->
  <div class="demo-section">
    <div class="demo-title">EditText 组件</div>
    <div id="edittext-demo"></div>
  </div>

  <!-- Image 组件演示 -->
  <div class="demo-section">
    <div class="demo-title">Image 组件</div>
    <div class="demo-grid" id="image-demo"></div>
  </div>

  <!-- Card 组件演示 -->
  <div class="demo-section">
    <div class="demo-title">Card 组件</div>
    <div class="demo-grid" id="card-demo"></div>
  </div>

  <!-- 综合示例 -->
  <div class="demo-section">
    <div class="demo-title">综合示例</div>
    <div id="complex-demo"></div>
  </div>

  <script type="module">
    import { Stone } from './stone/core/Stone.js';
    import { Button } from './stone/components/Button.js';
    import { Text } from './stone/components/Text.js';
    import { EditText } from './stone/components/EditText.js';
    import { Image } from './stone/components/Image.js';
    import { Card } from './stone/components/Card.js';
    import { LinearLayout } from './stone/layouts/LinearLayout.js';

    console.log('🚀 Stone UI 组件演示启动...');

    // 创建应用实例
    const app = new Stone();
    
    // 状态更新函数
    function updateStatus() {
      document.getElementById('theme-status').textContent = 
        app.theme.mode === 'dark' ? '暗黑模式' : '亮色模式';
    }

    // 1. 主题控制演示
    function createThemeDemo() {
      const layout = new LinearLayout({
        orientation: 'horizontal',
        style: { gap: '10px' }
      });

      const themeBtn = new Button({
        text: '切换暗黑模式',
        onClick: function() {
          app.toggleTheme();
          this.setText(app.theme.mode === 'dark' ? '切换亮色模式' : '切换暗黑模式');
          updateStatus();
          updateAllComponents();
        }
      });

      layout.addChild(themeBtn);
      return layout;
    }

    // 2. Text 组件演示
    function createTextDemo() {
      const layout = new LinearLayout({
        orientation: 'vertical',
        style: { gap: '10px' }
      });

      const title = new Text({
        text: '这是一个标题',
        tag: 'h1',
        style: { color: '#4285f4' }
      });

      const subtitle = new Text({
        text: '这是一个副标题',
        tag: 'h2'
      });

      const paragraph = new Text({
        text: '这是一段普通文本，展示了Text组件的基本用法。它支持不同的HTML标签和自定义样式。',
        tag: 'p'
      });

      const span = new Text({
        text: '这是一个行内文本',
        tag: 'span',
        style: { 
          backgroundColor: '#e3f2fd',
          padding: '4px 8px',
          borderRadius: '4px'
        }
      });

      layout.addChild(title);
      layout.addChild(subtitle);
      layout.addChild(paragraph);
      layout.addChild(span);

      return layout;
    }

    // 3. EditText 组件演示
    function createEditTextDemo() {
      const layout = new LinearLayout({
        orientation: 'vertical',
        style: { gap: '15px' }
      });

      // 普通文本输入
      const textInput = new EditText({
        placeholder: '请输入文本...',
        onInput: (event, value) => {
          console.log('文本输入:', value);
          document.getElementById('demo-status').textContent = `输入: ${value}`;
        }
      });

      // 密码输入
      const passwordInput = new EditText({
        type: 'password',
        placeholder: '请输入密码...'
      });

      // 多行文本输入
      const textareaInput = new EditText({
        multiline: true,
        rows: 4,
        placeholder: '请输入多行文本...',
        maxLength: 200
      });

      // 数字输入
      const numberInput = new EditText({
        type: 'number',
        placeholder: '请输入数字...'
      });

      layout.addChild(new Text({ text: '普通文本输入:', tag: 'label' }));
      layout.addChild(textInput);
      layout.addChild(new Text({ text: '密码输入:', tag: 'label' }));
      layout.addChild(passwordInput);
      layout.addChild(new Text({ text: '多行文本输入:', tag: 'label' }));
      layout.addChild(textareaInput);
      layout.addChild(new Text({ text: '数字输入:', tag: 'label' }));
      layout.addChild(numberInput);

      return layout;
    }

    // 4. Image 组件演示
    function createImageDemo() {
      const images = [];

      // 普通图片
      const normalImage = new Image({
        src: 'https://picsum.photos/300/200?random=1',
        alt: '示例图片',
        width: 300,
        height: 200,
        onLoad: () => console.log('图片加载成功'),
        onError: () => console.log('图片加载失败')
      });

      // 可点击图片
      const clickableImage = new Image({
        src: 'https://picsum.photos/300/200?random=2',
        alt: '可点击图片',
        width: 300,
        height: 200,
        onClick: () => alert('图片被点击了！')
      });

      // 懒加载图片
      const lazyImage = new Image({
        src: 'https://picsum.photos/300/200?random=3',
        alt: '懒加载图片',
        width: 300,
        height: 200,
        lazy: true
      });

      images.push(normalImage, clickableImage, lazyImage);
      return images;
    }

    // 5. Card 组件演示
    function createCardDemo() {
      const cards = [];

      // 简单卡片
      const simpleCard = new Card({
        title: '简单卡片',
        content: '这是一个简单的卡片组件，包含标题和内容。',
        elevation: 2
      });

      // 带图片的卡片
      const imageCard = new Card({
        title: '图片卡片',
        content: '这个卡片包含了一张图片。',
        image: 'https://picsum.photos/400/200?random=4',
        elevation: 3
      });

      // 带操作按钮的卡片
      const actionCard = new Card({
        title: '操作卡片',
        content: '这个卡片包含了操作按钮。',
        actions: [
          {
            text: '取消',
            onClick: () => alert('取消按钮被点击')
          },
          {
            text: '确认',
            primary: true,
            onClick: () => alert('确认按钮被点击')
          }
        ],
        elevation: 4
      });

      // 可点击卡片
      const clickableCard = new Card({
        title: '可点击卡片',
        content: '整个卡片都可以点击。',
        clickable: true,
        onClick: () => alert('卡片被点击了！'),
        elevation: 1
      });

      cards.push(simpleCard, imageCard, actionCard, clickableCard);
      return cards;
    }

    // 6. 综合示例
    function createComplexDemo() {
      const layout = new LinearLayout({
        orientation: 'vertical',
        style: { gap: '20px' }
      });

      // 用户信息卡片
      const userCard = new Card({
        title: '用户信息',
        elevation: 3,
        style: { maxWidth: '500px' }
      });

      // 在卡片中添加表单
      const nameInput = new EditText({
        placeholder: '请输入姓名...',
        style: { marginBottom: '10px' }
      });

      const emailInput = new EditText({
        type: 'email',
        placeholder: '请输入邮箱...',
        style: { marginBottom: '10px' }
      });

      const bioInput = new EditText({
        multiline: true,
        rows: 3,
        placeholder: '请输入个人简介...',
        style: { marginBottom: '15px' }
      });

      const submitBtn = new Button({
        text: '提交信息',
        onClick: () => {
          const name = nameInput.getValue();
          const email = emailInput.getValue();
          const bio = bioInput.getValue();
          alert(`姓名: ${name}\n邮箱: ${email}\n简介: ${bio}`);
        }
      });

      userCard.addChild(nameInput);
      userCard.addChild(emailInput);
      userCard.addChild(bioInput);
      userCard.addChild(submitBtn);

      layout.addChild(userCard);
      return layout;
    }

    // 更新所有组件主题
    function updateAllComponents() {
      // 更新所有已渲染的组件
      document.querySelectorAll('[data-stone-component]').forEach(element => {
        // 这里可以添加更复杂的组件更新逻辑
      });
      
      // 重新渲染所有演示
      setTimeout(() => {
        location.reload(); // 简单的重新加载页面
      }, 100);
    }

    // 渲染所有演示
    function renderAllDemos() {
      // 主题控制
      const themeDemo = createThemeDemo();
      document.getElementById('theme-controls').appendChild(themeDemo.render());

      // Text 演示
      const textDemo = createTextDemo();
      document.getElementById('text-demo').appendChild(textDemo.render());

      // EditText 演示
      const editTextDemo = createEditTextDemo();
      document.getElementById('edittext-demo').appendChild(editTextDemo.render());

      // Image 演示
      const imageDemo = createImageDemo();
      const imageContainer = document.getElementById('image-demo');
      imageDemo.forEach(image => {
        imageContainer.appendChild(image.render());
      });

      // Card 演示
      const cardDemo = createCardDemo();
      const cardContainer = document.getElementById('card-demo');
      cardDemo.forEach(card => {
        cardContainer.appendChild(card.render());
      });

      // 综合演示
      const complexDemo = createComplexDemo();
      document.getElementById('complex-demo').appendChild(complexDemo.render());
    }

    // 初始化应用
    app.render();
    renderAllDemos();
    updateStatus();

    console.log('✅ Stone UI 组件演示加载完成！');
  </script>
</body>
</html> 